<template>
  <el-card>
    <el-form :inline="true">
      <el-form-item label="用户" style="width: 220px;">
        <el-input placeholder="请输入" v-model="searchOrder.custName" @keydown.enter.prevent="loadOrder"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="loadOrder">查询</el-button>
      </el-form-item>
    </el-form>
    <el-menu mode="horizontal" style="border-bottom: none" @select="selectMenu">
      <el-menu-item index="">全部订单</el-menu-item>
      <el-menu-item index="10">待接取</el-menu-item>
      <el-menu-item index="20">未完成</el-menu-item>
      <el-menu-item index="30">已完成</el-menu-item>
    </el-menu>
  </el-card>

  <el-card>
    <el-table :data="orderArr" height="500">
      <el-table-column type="index" width="80" prop="id" align="center" label="编号"></el-table-column>
      <el-table-column align="center" prop="custName" label="客户"></el-table-column>
      <el-table-column align="center" prop="totalPrice" label="金额"></el-table-column>
      <el-table-column align="center" prop="custAddress" label="客户地址"></el-table-column>
      <el-table-column align="center" prop="payStatus" label="支付状态" :formatter="formatterPayStatus"></el-table-column>
      <el-table-column align="center" prop="status" label="订单状态" :formatter="formatterStatus"></el-table-column>
      <el-table-column align="center" prop="startTime" label="服务开始时间"></el-table-column>
      <el-table-column align="center" prop="endTime" label="服务结束时间"></el-table-column>
      <el-table-column align="center" prop="remark" label="备注" ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="detailOrder(scope.row)">详情</el-button>
          <el-button link type="primary" size="small" @click="updateOrder(scope.row)">删除</el-button>
          <el-button link type="primary" size="small" @click="takeOrder(scope.row)" v-if="scope.row.status==10">接取订单</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog title="订单详情" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :close-on-click-modal="false">
    <el-form label-width="100px" label-position="left">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="订单号">
            <span v-text="order.id"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名">
            <span v-text="order.custName"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="订单状态">
            <span>{{formatterStatus1(order.status)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新时间">
            <span v-text="order.updateTime"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="总价">
            <span v-text="order.totalPrice"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付状态">
            <span>{{formatterPayStatus1(order.payStatus)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="创建时间">
            <span v-text="order.createTime"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务开始时间">
            <span v-text="order.startTime"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="备注信息">
            <span v-text="order.remark" style="word-break: break-word;"></span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="客户地址">
            <span v-text="order.custAddress"></span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="服务">
            <span>{{serviceFormatter(order.serviceId)}}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" type="primary">返回</el-button>
    </template>
  </el-dialog>


</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const orderArr = ref([]);
const searchOrder =ref({custIds:[]})
const order=ref({})
const dialogVisible = ref(false);

const selectMenu = async (index) => {
  searchOrder.value.status=index
  if (index==10){
    searchOrder.value.empId=null
  }
  await loadOrder()
}

const loadOrder = async () => {
  if (searchOrder.value.custName!=null && searchOrder.value.custName.trim()){
    await axios.post(BASE_URL+'/v1/customer/select',{username:searchOrder.value.custName})
        .then((response)=>{
          if (response.data.code==2000){
            if (response.data.data.length===0){
              orderArr.value=[]
              alert('无此客户')
            }
            for (let data of response.data.data){
              searchOrder.value.custIds.push(data.id)
            }
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
  console.log(searchOrder.value)
  await axios.post(BASE_URL+'/v1/order/select',searchOrder.value)
      .then((response)=> {
        if(response.data.code===2000) {
          orderArr.value = response.data.data
          orderArr.value=orderArr.value.filter(order=>order.showStatus!='20' && order.showStatus!='40' &&
              order.showStatus!='50' && order.showStatus!='70')
          searchOrder.value={custIds:[],empId:currentEmp.value.id}
          console.log(3,orderArr.value)
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const currentEmp=ref({})
const orderStatus=ref([])
const orderPayStatus=ref([])
const serviceArr=ref([])
onMounted(async ()=> {
  await getEmp(currentEmp).then(()=>{
    if (Object.keys(currentEmp.value).length!=0){
      searchOrder.value.empId=currentEmp.value.id
    }else if (Object.keys(currentEmp.value).length==0){
      router.push('/empLogin')
    }
  })
  await loadOrder()
  await loadDictOptions(orderStatus,'OrderStatus')
  await loadDictOptions(orderPayStatus,'OrderPayStatus')
  await loadService()
})
const loadService = async () => {
  await axios.post(BASE_URL+'/v1/dsService/select',{})
      .then((response)=>{
        if (response.data.code==2000){
          serviceArr.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const serviceFormatter = (id) => {
  if (!serviceArr.value){
    return id;
  }
  for (let s of serviceArr.value){
    if (s.id==id){
      id=s.name
    }
  }
  return id
}
const formatterStatus = (row,column,cellValue,index) => {
  if (!orderStatus.value){
    return cellValue
  }
  if (cellValue==null){
    cellValue='未付款'
    return cellValue
  }
  for (let item of orderStatus.value){
    if (item.value==cellValue){
      cellValue=item.label
      return cellValue
    }
  }
}
const formatterPayStatus = (row,column,cellValue,index) => {
  if (!orderPayStatus.value){
    return cellValue
  }
  for (let item of orderPayStatus.value){
    if (item.value==cellValue){
      cellValue=item.label
      return cellValue
    }
  }
}
const formatterStatus1 = (s) => {
  if (!orderStatus.value){
    return s
  }
  if (s==null){
    s='未付款'
    return s
  }
  for (let item of orderStatus.value){
    if (item.value==s){
      s=item.label
      return s
    }
  }
}
const formatterPayStatus1 = (s) => {
  if (!orderPayStatus.value){
    return s
  }
  for (let item of orderPayStatus.value){
    if (item.value==s){
      s=item.label
      return s
    }
  }
}
const reset = () => {
  searchOrder.value={custIds:[],empId:currentEmp.value.id}
  loadOrder()
}

const takeOrder = (row) => {
  if (confirm("确认接取该订单吗")){
    axios.put(BASE_URL+'/v1/order/updateStatus',{id:row.id,empId:currentEmp.value.id,status:20})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("接取成功")
            searchOrder.value={custIds:[],status:10,empId:currentEmp.value.id}
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const detailOrder = (row) => {
  order.value=row
  dialogVisible.value=true
}
const updateOrder = async (row) => {
  if (confirm("确认要删除吗")){
    if (row.showStatus!=null){
      if (row.showStatus=='10'){
        row.showStatus='40'
      }else if (row.showStatus=='30'){
        row.showStatus='50'
      }else if (row.showStatus=='60'){
        row.showStatus='70'
      }
    }else {
      row.showStatus='20'
    }
    //10:用户删除，20:员工删除，30:管理员删除，40：用户和员工删除，50：管理员和员工删除，60：管理员和用户删除，70：管理员和用户和员工删除
    await axios.post(BASE_URL+'/v1/order/save',{id:row.id,showStatus:row.showStatus})
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success("删除成功")
            loadOrder()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const handleClose = () => {
  dialogVisible.value=false
}
</script>

<style scoped>

</style>